<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>注册 - 优选商城</title>
    <style th:fragment="style">
        .register-container {
            max-width: 500px;
            margin: 2rem auto;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            background: white;
        }
        .register-title {
            text-align: center;
            margin-bottom: 2rem;
            color: #1e3c72;
        }
        .form-floating {
            margin-bottom: 1rem;
        }
        .btn-register {
            width: 100%;
            padding: 0.8rem;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            border: none;
            color: white;
            font-weight: 500;
            margin-top: 1rem;
        }
        .btn-register:hover {
            background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
            color: white;
        }
        .login-link {
            text-align: center;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <div class="container">
            <div class="register-container">
                <h2 class="register-title">用户注册</h2>
                <form id="registerForm" th:action="@{/register}" method="post">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>
                        <label for="username">用户名</label>
                    </div>
                    <div class="form-floating">
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码" required>
                        <label for="password">密码</label>
                    </div>
                    <div class="form-floating">
                        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="确认密码" required>
                        <label for="confirmPassword">确认密码</label>
                    </div>
                    <div class="form-floating">
                        <input type="text" class="form-control" id="nickname" name="nickname" placeholder="昵称">
                        <label for="nickname">昵称</label>
                    </div>
                    <div class="form-floating">
                        <input type="tel" class="form-control" id="phone" name="phone" placeholder="手机号">
                        <label for="phone">手机号</label>
                    </div>
                    <div class="form-floating">
                        <input type="email" class="form-control" id="email" name="email" placeholder="邮箱">
                        <label for="email">邮箱</label>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">性别</label>
                        <div class="btn-group w-100" role="group">
                            <input type="radio" class="btn-check" name="gender" id="gender1" value="1" checked>
                            <label class="btn btn-outline-primary" for="gender1">
                                <i class="bi bi-gender-male"></i> 男
                            </label>
                            
                            <input type="radio" class="btn-check" name="gender" id="gender2" value="2">
                            <label class="btn btn-outline-primary" for="gender2">
                                <i class="bi bi-gender-female"></i> 女
                            </label>
                            
                            <input type="radio" class="btn-check" name="gender" id="gender0" value="0">
                            <label class="btn btn-outline-primary" for="gender0">
                                <i class="bi bi-question-circle"></i> 保密
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">注册类型</label>
                        <select class="form-select" name="role">
                            <option value="0">普通用户</option>
                            <option value="1">管理员</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-register">注册</button>
                    <div class="login-link">
                        已有账号？<a th:href="@{/login}">立即登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script th:fragment="script">
        $(document).ready(function() {
            // 表单提交
            $('#registerForm').submit(function(e) {
                e.preventDefault();
                
                // 表单验证
                if (!this.checkValidity()) {
                    e.stopPropagation();
                    $(this).addClass('was-validated');
                    return;
                }

            // 密码验证
                const password = $('#password').val();
                const confirmPassword = $('#confirmPassword').val();
                
                if (password !== confirmPassword) {
                    showError('两次输入的密码不一致');
                    return;
                }

                // 提交表单
                $.ajax({
                    url: '/register',
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(res) {
                        if (res.code === 0) {
                            showSuccess('注册成功，请登录');
                            setTimeout(function() {
                                window.location.href = '/login';
                            }, 1500);
                        } else {
                            showError(res.msg || '注册失败');
                        }
                    },
                    error: function() {
                        showError('注册失败，请重试');
                }
                });
            });
        });
    </script>
</body>
</html> 